import React, {useState, useRef, useEffect} from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';

/*
  1-访问用户的设备摄像头
     navigator.mediaDevices.getUserMedia({
        video: true, //访问的设备  访问的摄像头设备
      })
  2-将摄像头获取的视频流给video标签
  3-通过canvas画布获取video标签的视频帧
*/

export default function Face() {
    let video = useRef();
    let canvas = useRef();
  const navigate = useNavigate();

  useEffect(() => {
    open();
    //页面一加载就打开摄像头
  }, []);

    // 1-利用视频的效果 捕捉最新的视频界面作为人脸库对比的照片
  //   打开摄像头的方法
  let open = () => {
    // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
    if (navigator.mediaDevices === undefined) {
      //{}IE低版本浏览器虽然不能用  但是也不会出现报错
      navigator.mediaDevices = {};
    }
    // 标准的API  navigator对象是js的方法
    // navigator.mediaDevices.getUserMedia()：请求访问用户的媒体设备（如摄像头、麦克风），常用于视频通话或音频录制等场景。
    // 像用户发起弹窗  询问是否允许访问摄像头或者麦克风设备的权限问题
    navigator.mediaDevices.getUserMedia({
        video: true, //访问的设备  访问的摄像头设备
        // audio:true,//访问麦克风设备
      })
      .then((stream) => {
        console.log(stream); 
        // 摄像头开启成功  将视频流给video标签的src属性 并且主动播放视频
        video.current.srcObject = stream;
        video.current?.play().catch((e) => {
          if (e.name !== "AbortError") {
            console.error(e);
          }
        });
      })
      .catch((err) => {
        // 摄像头打开失败
        console.log('err', err);
        alert('摄像头打开失败');
      });
  };

    //   关闭摄像头
  let close = () => {
    if (video.current && video.current.srcObject) {
      const tracks = video.current.srcObject.getTracks();
      tracks.forEach(track => track.stop());
      video.current.srcObject = null;
    }
  };

  //   截取视频画面  和人脸库对比人员信息
  let drawMedia = async () => {
    //获取到canvas对象
    const ctx = canvas.current?.getContext('2d');
    // 清除画布  每次绘制之前都把之前的画布全部清除
    // 从0 0点开始清除 清除整个画布
    ctx?.clearRect(0, 0, canvas.current.width, canvas.current.height);
    //绘制视频画面  把当前最新的视频画面作为图像绘制到canvas中
    ctx.drawImage(
      video.current, //要绘制的图像  video标签
      (canvas.current.width - canvas.current.width * (320 / 240)) / 2,
      0,
      canvas.current.width * (320 / 240),
      canvas.current.height,
    );
    //图片转base64编码  canvas画布中只有一张图像   toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；
    const base64 = canvas.current.toDataURL('image/jpeg');
    //imgsrc 是一个变量  用于存放当前截取画面的base64
    // setImgSrc(base64);
    //把base64编码发送到后端
    console.log(base64);
    try {
      const { data } = await axios.post('http://localhost:3000/bkc/faceLogin', {
        base64: base64.split(',')[1],
      });
      console.log(data, 'data');
      if (data.code === 0) {
        alert('验证成功');
        navigate('/');
      } else {
        alert('验证失败');
      }
    } catch (e) {
      alert('验证失败');
    }
  };
  return (
    <div>
        {/* <!-- 摄像展示要用video标签 --> */}
      <video ref={video} preload="auto" autoPlay loop muted width="100%"></video>
      {/* <!-- 截取的照片用canvas标签展示 --> */}
      <canvas ref={canvas} width="300" height="300"></canvas>
      <div style={{display:"flex",justifyContent:"center"}}>
        <button onClick={() => open()}>打开摄像头</button>
        <button onClick={() => close()}>关闭摄像头</button>
        <button onClick={() => drawMedia()}>截取视频画面</button>
      </div>
    </div>
  )
}

